<template>
  <div class="center">
    <ul>
       <li v-for="(item,index) in sorttems" :key="index">
        {{item}}
     </li>
    </ul>
		<h2>数组的遍历</h2>
		<ul>
			<li v-for="(student,index) in arrydata" :key="index">
				 {{student.name}} - {{student.age}}
		</li>
		</ul>
		<h2>鼠标事件</h2>
		<div id="canvas"  @mousemove="updatexy">
			{{x}}=={{y}}
			<span @mousemove.stop="aler"> 不动区域 </span>
		</div>
		<h2>阻止默认事件</h2>
			<a   @click.prevent="aler" href="http://www.thenewstep.com">阻止默认事件</a>
    <h2>系统修饰键</h2>
		
	
	
	</div>
</template>

<script>
export default {
  name: 'certer',
  data () {
    return {
      items:[20,23,18,65,32,19,54,56,41],
			students:[
					{name:'jspang',age:32},
					{name:'Panda',age:30},
					{name:'PanPaN',age:21},
					{name:'King',age:45}
			],
			x:0,
			y:0
    }
  },
	computed:{
		sorttems(){
			return this.items.sort(this.sortnumber)	
		},
		arrydata(){
			 return this.sortByKey(this.students,'age');
		}
	},
	methods:{
		sortnumber(a,b){
			return a-b
		},
		sortByKey(array,key){
			return array.sort(function(a,b){
				var x=a[key];
				var y=b[key];
				return ((x<y)?-1:((x>y)?1:0));
		 });
	  },
		updatexy(e){
			 this.x=e.offsetX;
			 this.y=e.offsetY;
		},
		aler(){
			console.log("阻止默认事件")
		}
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#canvas{
		width: 300px;
		height: 300px;
		border: 1px solid salmon;
		margin: 10px auto;
	}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
